<template>
    <div class="system-systemoperationlog-container layout-padding">
        <!-- 最底层 -->
        <el-card shadow="hover" class="layout-padding-auto">

            <div class="table-search-container">
                <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px" class="table-form">
                    <el-row>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                            <el-form-item label="服务名称">
                                <el-select clearable v-model="state.ruleForm.microServiceName" placeholder="服务名称">
                                    <el-option v-for="item in state.microServiceList" :label="item" :value="item" :key="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" >
                            <el-form-item label="用户名">
                                <el-input v-model="state.ruleForm.username" style="width: 100%" placeholder="用户名"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                            <el-form-item label="关键字">
                                <el-input v-model="state.ruleForm.desc" style="width: 100%" placeholder="ip/描述/参数/uri/请求信息"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" >
                            <el-form-item label="是否成功">
                                <el-select v-model="state.ruleForm.success" placeholder="是否成功" clearable class="input-width" style="width: 100%">
                                    <el-option key="true" label="成功" value="true"></el-option>
                                    <el-option key="false" label="失败" value="false"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                            <el-form-item label="接口类型" v-show="state.isToggle">
                                <el-select v-model="state.ruleForm.Type" placeholder="接口类型" clearable class="input-width" style="width: 100%">
                                    <el-option key="1" label="APP" value="1"></el-option>
                                    <el-option key="2" label="后台" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="更新时间">
                                <el-date-picker v-model="state.ruleForm.createdOrUpdateTime" type="datetimerange" :picker-options="state.pickerOptions"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>


                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
                                <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                    <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                                    <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                                </div>
                                <div>
                                    <el-button size="default" type="primary" @click="refresh()">查询
                                    </el-button>
                                    <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                    </el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <el-card shadow="hover" class="layout-padding-auto">
                <el-table size="default" :data="state.tableData" style="width: 100%">
                    <el-table-column align="center" label="IP" show-overflow-tooltip>
                        <template #default="scope">
                            <div>{{ getReqIp(0, scope.row.reqIp) }}</div>
                            <div>{{ getReqIp(1, scope.row.reqIp) }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="类型">
                        <template #default="scope">
                            <span>{{ scope.row.type == 1 ? 'app' : '后台' }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="服务名" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.microName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否成功" show-overflow-tooltip>
                        <template #default="scope">
                            <el-tag v-model="scope.row.success" :type="scope.row.success ? 'info' : 'danger'">
                                <span style="font-size: 12px;">{{ scope.row.success ? '成功' : '失败' }}</span>
                            </el-tag>
                            <!--  -->
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="接口地址" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.uri }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="用户名" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.userName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="用户ID">
                        <template #default="scope">
                            <span>{{ scope.row.userId }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="响应时间(ms)">
                        <template #default="scope">
                            <span>{{ scope.row.spendTime }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="描述">
                        <template #default="scope">
                            <span>{{ scope.row.desc }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="返回结果" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.resMsg }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column width="200" align="center" label="操作时间">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.createDate), "YYYY-mm-dd HH:MM:SS") }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="200">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="handlerEdit(scope.row)">
                                详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30]"
                v-model:current-page="state.ruleForm.page" background v-model:page-size="state.ruleForm.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="state.ruleForm.total">
            </el-pagination>

        </el-card>
        <detailDialog ref="detailDialogRef"></detailDialog>
    </div>
</template>

<script setup lang="ts" name="systemoperationlog">

import { formatDate } from './../../../utils/formatTime';
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 导入接口
import { useSysApi } from "../../../api/sys";


// 引入组件
//const interfaceDialog = defineAsyncComponent(() => import('/@/views/system/datainterface/dialog.vue'));
const interfaceDialogRef = ref();




const state = reactive({
    isToggle: false,
    tableData: [],
    statusList: [] as any,
    microServiceList: [] as any,
    ruleForm: {
        page: 1,
        limit: 10,
        total: 0,
        username: "",
        userId: "",
        desc: "",
        reqIp: "",
        uri: "",
        success: "",
        createdOrUpdateUserName: "",
        urlOrSqlContent: "",
        Type: "",
        authMethod: [],
        microServiceName: "",
        status: [],
        createdOrUpdateTime: []
    },
    pickerOptions: {
        shortcuts: [
            {
                text: "最近一周",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 7
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近一个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 30
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近三个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 90
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
        ],
    },
    multipleSelection: [],// 选择的项


});

// 引入组件
const detailDialog = defineAsyncComponent(() => import('./detail.vue'));
const detailDialogRef = ref();
const handlerEdit = (row: any) => {
    detailDialogRef.value.openDialog('edit', row);
}

const handleResetSearch = () => {
    state.ruleForm = {
        page: 1,
        limit: 10,
        total: 0,
        username: "",
        userId: "",
        desc: "",
        reqIp: "",
        uri: "",
        createdOrUpdateUserName: "",
        urlOrSqlContent: "",
        Type: "",
        authMethod: [],
        microServiceName: "",
        status: [],
        createdOrUpdateTime: []
    };
    pagedGetOperateLog();
}

const refresh = () => {
    pagedGetOperateLog();
}

const getReqIp = (index: number, ip: any) => {
    if (!ip) return "";
    let arrTemp = ip.split(",");
    if (index == 0 && arrTemp.length > 0) return arrTemp[0];
    if (index == 1 && arrTemp.length > 1) return arrTemp[1];
    return "";

}
// 分页改变
const onHandleSizeChange = (val: number) => {
    state.ruleForm.limit = val;
    pagedGetOperateLog();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.ruleForm.page = val;
    pagedGetOperateLog();
};
const pagedGetOperateLog = async () => {
    try {
        let vo: any = {};
        if (state.ruleForm.username) vo["username"] = state.ruleForm.username;
        if (state.ruleForm.userId) vo["userId"] = state.ruleForm.userId;
        if (state.ruleForm.desc) vo["desc"] = state.ruleForm.desc;
        if (state.ruleForm.reqIp) vo["reqIp"] = state.ruleForm.reqIp;
        if (state.ruleForm.uri) vo["uri"] = state.ruleForm.uri;
        if (state.ruleForm.Type) vo["type"] = state.ruleForm.Type;
        if (state.ruleForm.success) vo["success"] = state.ruleForm.success;
        if (state.ruleForm.microServiceName) { vo["microName"] = state.ruleForm.microServiceName };
        if (state.ruleForm.createdOrUpdateTime && state.ruleForm.createdOrUpdateTime.length > 0) {
            vo["startTime"] = formatDate(new Date(state.ruleForm.createdOrUpdateTime[0]), "YYYY-mm-dd HH:MM:SS")
            vo["endTime"] = formatDate(new Date(state.ruleForm.createdOrUpdateTime[1]), "YYYY-mm-dd HH:MM:SS")
        };
        // else { vo["microName"] == "COMMON-SERVICE" };
        // console.log(vo)
        // console.log(state.ruleForm.createdOrUpdateTime)
        // vo["microName"] ="COMMON-SERVICE"
        let listTemp = await useSysApi().pagedGetOperateLog(
            state.ruleForm.page,
            state.ruleForm.limit,
            vo
        );

        state.ruleForm.total = listTemp.total;

        // console.log(listTemp.list)
        // console.log(listTemp)
        state.tableData = listTemp.list;


    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}
const getServices = async () => {
    state.microServiceList = await useSysApi().getServices();
    if (state.microServiceList.length > 0) state.ruleForm.microServiceName = state.microServiceList[0]
}

// 页面加载时
onMounted(async () => {
    await getServices();
    await pagedGetOperateLog();
});







</script>





<style lang="scss" scoped>
// .el-form .el-form-item:last-of-type {
//     margin-bottom: 22px !important;
// }

.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.system-systemoperationlog-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}

.bar_btn_div {
    display: flex;
    padding: 20px;
    border: 1px solid #ebeef5;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0px 0px;

    .title_div {
        display: flex;
        font-size: 16px;

        &>div {
            margin-right: 10px;
        }
    }
}

.search_div {
    border: 1px solid #ebeef5;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding: 20px;
    padding-bottom: 0px;
}

.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>
